<template>
  <div class="el-dialog__body-bodys">
    <div class="bodys-header">
      <span style="font-weight: 600">发货单号：{{ detail.shipCode }}</span>
      <span class="transportation-status">{{ detail.shipStatusString }}</span>
    </div>
    <div class="bodys-content">
      <el-aside width="200px" class="bodys-left" v-if="detail.logisticsData.length">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              :default-active="selected"
              class="el-menu-vertical-demo"
              @select="handleSelect"
            >
              <div v-for="(item, index) in detail.logisticsData" :key="index">
                <el-menu-item :index="index.toString()">
                  <div class="ship-information">
                    <div class="car-name">{{ item.licenseNO }}</div>
                    <div
                      :class="{
                        'person-phone': true,
                        active: selected === index.toString()
                      }"
                    >
                      <span style="margin-right: 3px">{{
                        item.driverName
                      }}</span
                      ><span>{{ item.driverPhone }}</span>
                    </div>
                  </div>
                </el-menu-item>
              </div>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <div class="bodys-right">
        <div class="goods-map" v-if="detail.logisticsData.length">
          <iframe :src="mapSrc" frameborder="0" class="iframesty">
            <p class="tip">你的浏览器不支持iframe标签</p>
          </iframe>
        </div>
        <div class="no-content" v-else>
          <img
            class="no-content-img"
            src="../../../../config/icons/svg/car-image.png"
            alt="未加载成功"
          />
          <div>{{ message.notEntered }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapTrack} from "./api"
  import {parseTime} from "@/basa/utils"
export default {
  name: "Invoice",
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selected: "0",
      message:{"notFound":"未查询到车辆信息，无法跟踪物流信息", "notEntered":"供应商已将货物发出，尚未补充发货信息"},
      mapSrc: ""
    };
  },
  watch:{
    "detail.shipCode"(){
      console.log("切换发货单(watch)")
      this.init()
    }
  },
  mounted() {
    this.init()
    console.log("init mounted")
  },
  methods: {
    // 切换发货单时调用
    init(){
      this.selected="0"
      this.getMapTrack()
    },
    // 切换车辆行驶轨迹
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      this.selected = key;
      this.getMapTrack()
      
    },
    // 其他页面会调用这个 勿删
    handleSelectCarNumber(carNumber){
      for(let i=0;i<this.detail.logisticsData.length;i++){
        if(this.detail.logisticsData[i].licenseNO === carNumber){
          this.selected = i.toString()
          break
        }
      }
      this.getMapTrack()
    },
    // 获取车辆行驶轨迹
    getMapTrack(){
      console.log(this.detail)
      if(this.detail.logisticsData.length){
        let obj = {
          // licenseNO: "冀ER8567",
          // startTime: "2021-09-20 00:00:00",
          // endTime: "2021-09-20 23:59:59",
          licenseNO: this.detail.logisticsData[this.selected].licenseNO,
          startTime: this.detail.logisticsData[this.selected].startTime,
          endTime: this.detail.logisticsData[this.selected].endTime || parseTime(new Date()),
          driverName: this.detail.logisticsData[this.selected].driverName,
          driverPhone: this.detail.logisticsData[this.selected].driverPhone,
        }
        mapTrack(obj).then(res=>{
          console.log(res)
          this.mapSrc = res.data.data
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bodys-header {
  margin: 5px 0 20px 0;
  color: #4a4a4a;
  font-family: PingFangSC-Medium, PingFang SC;
  .transportation-status {
    color: #16ba8a;
    margin-left: 25px;
  }
}
/deep/.el-menu-item.is-active {
  background: rgba(0, 137, 239, 0.1);
}
/deep/.el-col-12 {
  width: 100%;
}
/deep/.el-menu {
  border: none;
}
/deep/.el-menu-item,
.el-submenu__title {
  line-height: 17px;
  border-bottom: 1px solid #f1f1f1;
}

.bodys-content {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  margin-bottom: 20px;

  .bodys-left {
    float: left;
    border: 1px solid #f1f1f1;
    height: 418px;
    margin-right: 20px;

    .ship-information {
      padding: 8px 0;
      .car-name {
        font-size: 13px;
        margin-bottom: 3px;
      }
      .person-phone {
        font-size: 10px;
        color: #9b9b9b;
      }
      .active {
        color: #0089ef;
      }
    }
  }

  .bodys-right {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: 100%;
    height: 415px;
    border: 1px solid #f1f1f1;
    .goods-map {
      width: 735px;
      height: 415px;
      overflow: hidden;
      /*border: 1px solid #f1f1f1;*/
      .iframesty {
        width: 755px;
        height: 440px;
        margin: -10px;
      }
    }
    .no-content {
      display: flex;
      /*color: #948f8f;*/
      font-size: 15px;
      color: black;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      .no-content-img {
        margin: 0 100%;
      }
    }
  }
}

</style>
